<template>
  <div class="home">
    <h2 class="home-title">主应用</h2>
    <el-button type="primary" @click="handleClickDialog"
      >点击弹出弹窗</el-button
    >

    <el-dialog v-model="dialogVisible" title="Tips" width="30%" append-to-body>
      <span>This is a message</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            Confirm
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  name: "HomeCom",
  setup() {
    const dialogVisible = ref(false);

    const handleClickDialog = () => {
      dialogVisible.value = true;
      console.log(dialogVisible.value);
    };

    return {
      dialogVisible,
      handleClickDialog,
    };
  },
};
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  background-color: rgb(184, 225, 234);
}
.home-title {
  color: aqua;
}
</style>
